const Aggrid = {
    template: `
   
        <div class="flexcc p15"><h1>{{ tableCaption }}</h1></div>

        <div><button @click="handleEditRow('dddd')">Hello</button></div>
        <div id="myGrid" style="height: 85%; width:100%;" class="ag-theme-alpine"></div>
   
  `,
    setup() {

        const tableData = Vue.ref([])
        const tableCaption = Vue.ref("Aggrid 测试")

        const handleEditRow = data=>{

            console.log("hello");
            
        }

        Vue.onMounted(() => {

            const gridOptions = {
                columnDefs: [
                    { field: 'id', width: 50 },
                    { field: 'name', width: 150 },
                    {
                        field: 'gender', width: 150, editable: true, cellEditor: 'agSelectCellEditor',
                        cellEditorParams: {
                            values: ['man', 'woman', 'girl', 'boy','男','女'],
                        
                            allowNewValues:true
                        }
                    },
                    { field: 'comment', editable: true },
                    {
                        headerName: 'actions', cellRenderer: params => {

                            const {data} = params
                            return `<button @click='handleEditRow(data)'>edit</button>`

                        }
                    },
                ],
                rowData: tableData.value,
                pagination: true,
                paginationPageSize: 20,
                editType: 'fullRow',
                rowHeight: 35,
                suppressClickEdit:true,
                defaultColDef: {

                    headerStyle: { color: 'white', 'background-color': 'green' }
                }

            };


            for (let i = 1; i < 16; i++) {
                tableData.value.push({
                    id: i,
                    name: `people${i}`,
                    gender: i % 5 ? "男" : "女",
                    comment: `hello${i}`
                })
            }

            const gridDiv = document.querySelector('#myGrid');
            // 使用新的 createGrid API
            const gridApi = agGrid.createGrid(gridDiv, gridOptions);

            // 可以直接使用 gridApi
            gridApi.sizeColumnsToFit();

        })

        return {
            tableData,
            tableCaption,
            handleEditRow
        }


    }
};
